<template>
	<view class="flex padding-lg flex-wrap justify-between" style="margin-top: 80rpx;">
		<!-- 左侧目录按钮 -->
		<button 
		class="cu-btn" 
		style="
			width: 110rpx;
			height: 110rpx; 
			margin-left: 20rpx; 
			border-radius: 40rpx; 
			background-color: #ECF2F0;" 
		v-if="!isActive"
		@click="openDrawer">
		<uni-icons fontFamily="iconfont" :size="30">{{"\ue636"}}</uni-icons>
		</button>
		<!-- 右侧加号按钮 -->
		<button
		class="cu-btn bg-gray" 
		:class="{isActive: isActive}"
		style="
			width: 110rpx; 
			height: 110rpx; 
			border-radius: 40rpx; 
			z-index: 20; 
			margin-left: auto;"
		@click="handlePlus()"
		>
			<uni-icons 
			  fontFamily="iconfont" 
			  :size="50"
			  class="icon-transition"
			  :class="{ 'icon-active': isActive }"
			>
			{{"\ueb78"}}
			</uni-icons>
		</button>
	</view>

	<!-- 主屏幕 -->
	<view class="main-sreen">
		<view class="main-image">		
			<image 
			src="/src/static/travel.png" 
			mode="aspectFill" 
			style="
				border-radius: inherit;
				width: 100%;
				height: 100%;
				">
			</image>
		</view>
		<text style="color: gray; margin-bottom: 40rpx;">开启一段旅行吧！</text>
		<view class="main-button">
			<text 
				style="
					font-weight: 
					bold; color: #FFF;" 
				@click="handleCreate()"
				>
				开启旅行
			</text>
		</view>
	</view>

	<!-- 左侧抽屉组件 -->
	<uni-drawer ref="drawer" mode="left" >
		<view class="flex justify-start">
			<view class="margin-top-xl padding-lg" style="margin-top: 20rpx;">
				<view class="" @click="goMine">
					<view class="cu-avatar round">
						<image 
						src="/src/static/doubao.png" 
						mode="aspectFill" 
						style="width: 100%;height: 100%;"/>
					</view>
					<text class="margin-left-sm text-black text-bold text-lg">{{userCheckStroe.userInfo?.username}}</text>
				</view>
				<view class="bookmark-container">
				<image 
					src="/src/static/sunset.jpg" 
					mode="aspectFill"
					style="
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: inherit;
						"
				/>
				</view>
				<drawer-tab iconType="person" textContent="账号资料" :iconSize="28" @click="goMine"></drawer-tab>
				<drawer-tab iconType="star" textContent="书签收集" :iconSize="28"></drawer-tab>
				<drawer-tab iconType="cart" textContent="购买小册" :iconSize="28"></drawer-tab>
				<drawer-tab iconType="paperclip" textContent="帮助中心" :iconSize="28"></drawer-tab>
				<drawer-tab iconType="list" textContent="小组件" :iconSize="28"></drawer-tab>
				<drawer-tab iconType="settings" textContent="更多设置" :iconSize="28"></drawer-tab>
			</view>
		</view>
	</uni-drawer>

	<!-- 右侧半透明遮罩层 -->
	<view 
	class="mask" 
	:class="{ 'mask-enter': isActive, 'mask-leave': !isActive }"
	@click="handlePlus"
	>
		<!-- Logo 动画 -->
		<view class="logo" :class="{ 'animate-fade': isActive }">
			<text>GreenBook</text>
		</view>
		<!-- 遮罩层卡片容器 -->
		<view class="mask-content" @click.stop>
			<TravelCard 
				v-for="(card, index) in cards" 
				:key="index" 
				v-bind="card" 
				@click="card.onClick"
				:class="{ 'animate-fade': isActive }"
				:style="{ animationDelay: `${index * 300}ms` }" 
			/>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import drawerTab from '@/components/drawer-tab.vue';
import UniDrawer from '@/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue';
import TravelCard from '@/components/TravelCard.vue';
import { useSave } from '@/store';

const drawer = ref<InstanceType<typeof UniDrawer> | null>(null);
const isActive = ref(false);
// 左侧按钮点击事件
const openDrawer = () => drawer.value?.open();
//左侧菜单-账号资料页面跳转
const goMine=()=>{
	uni.navigateTo({
		url:'/pages/mine/mine',
	})
}

///状态机
const userCheckStroe = useSave()

onMounted(()=>{
	if(userCheckStroe.userInfo===null){
		uni.reLaunch({
			url:'/pages/login/login'
		})
	}
	if(userCheckStroe.userInfo?.password===null){
		uni.navigateTo({
			url:'/pages/mine/updatePassword'
		})
	}
})

// 右侧按钮点击事件
const handlePlus = () => isActive.value = !isActive.value;

//卡片点击事件
const handleCreate = () =>{
	uni.navigateTo({
		url:'/pages/green_books/bookCover',
		animationType:'slide-in-bottom',
		animationDuration:3000,
	})
}		

const handleJoin = () => console.log('加入小册逻辑');
// 卡片配置
const cards = ref([
  { title: "创建小册", desc: "创作属于自己的旅行书", unicode:"\ue788", onClick: handleCreate },
  { title: "加入小册", desc: "对上暗号，和伙伴一起创作", unicode:"\ue658", onClick: handleJoin }
]);


</script>

<style lang="scss" scoped>
page {
  background-color: #F4FAF8;
}

.container {
  position: relative;
  min-height: 100vh;
}

// 激活状态样式
.isActive {
  background-color: #C3E7D9;
} 
/*main页面*/
.drawer-content{
	display: flex;
	flex-direction: column;
}

/*主屏幕*/
.main-sreen{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main-image{
	width: 90%;
	margin-left: 40rpx;
	height: 450rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-content: center;
	border-radius: 20rpx;
	padding: 40rpx;
}
.main-button{
	display: flex;
	justify-content: center;
	align-content: center;
	width: 400rpx;
	height: 80rpx;
	border: 1px solid #2DD296;
	border-radius: 40rpx;
	padding: 20rpx;
	background-color: #2DD296;
	box-shadow:0 4rpx 12rpx 5rpx rgba(45,210,150,0.5);
	
	&:active {
	  transform: scale(0.98);
	  opacity: 0.9;
	}
}


/* 图标过渡动画 */
.icon-transition {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
  transform: rotate(0deg) scale(1);
  opacity: 1;
  display: inline-block; 
}
.icon-active {
  transform: rotate(45deg) scale(1.1);
  color: #4CAF50; 
}
/*左侧菜单的书签*/
.bookmark-container {
  display: flex;
  margin-top: 20rpx;
  margin-left: rpx;
  width: 470rpx;
  height: 300rpx;
  border-radius: 25rpx;
}

/* 遮罩层*/
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(200, 200, 200, 0.3); 
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  align-items: center;
}
/* 遮罩层淡入 */
.mask-enter {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease; 
}
/* 遮罩层淡出 */
.mask-leave {
  opacity: 0;
  visibility: hidden;
}

/* Logo 渐入动画 */
.logo {
  margin-top: 120rpx; 
  font-size: 40rpx;
  font-weight: bold;
  color: grey; 
  margin-right: 380rpx;
  opacity: 0;
  transform: translateX(20rpx);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
.logo.animate-fade {
  opacity: 1;
  transform: translateX(0);
}
/* 遮罩内容容器 */
.mask-content {
  margin-top: 100rpx;
  width: 90%;
  max-width: 650rpx;
  z-index: 16; 
}
</style>